<template>
  <ElCard
    :class="['mb-6', !visibleForm && 'py-0 !mb-0']"
    :body-class="`transition-all duration-300 !pb-0 ${!visibleForm && '!py-0'}`"
  >
    <PowerfulForm
      ref="PForm"
      extend-table
      show-type="query"
      :property="{
        inline: true,
      }"
    >
      <template #last-item>
        <el-button
          type="primary"
          @click="PTable?.resetList(PForm?.powerfulFormData.formData || {})"
        >
          查询
        </el-button>
        <el-button @click="PForm?.resetForm">重置</el-button>
      </template>
    </PowerfulForm>
  </ElCard>

  <ElCard>
    <PowerfulTable
      ref="PTable"
      :btn-config="btnConfig"
      :header="headers"
      :list-request="{
        listApi: apparatusApi.getApparatusList,
      }"
      :property="{
        rowKey: '_id',
      }"
      @btn-plus-refresh="handleVisibleForm(PForm?.visibleFormTrigger)"
      @btn-click="handleBtnClick"
      @btn-plus-change="handleBtnPlusChange"
    >
    </PowerfulTable>
  </ElCard>

  <ElDrawer
    v-model="drawerData.visible"
    :title="drawerData.showType === 'add' ? '新增器械' : '编辑器械'"
  >
    <PowerfulForm
      ref="DrawerPForm"
      extend-table
      :form-data-default="drawerData.formData"
      :show-type="drawerData.showType"
      :apis="{
        add: apparatusApi.apparatusAdd,
        edit: apparatusApi.apparatusUpdate,
      }"
      :property="{
        labelWidth: '100px',
      }"
    />

    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts">
import {
  type PowerfulFormExpose,
  type PowerfulFormPTHeaders,
  type PTHeadersProps,
} from 'el-plus-powerful-form'
import type { Handlers, PowerfulTableExpose } from 'el-plus-powerful-table'
import { apparatusApi } from '@/api/apparatus'
import { useListOperate } from '@/hooks/useListOperate'

type Rows = any
const PTable = ref<PowerfulTableExpose | null>(null)
const PForm = ref<PowerfulFormExpose | null>(null)
const DrawerPForm = ref<PowerfulFormExpose | null>(null)
const drawerData = reactive({
  visible: false,
  showType: 'add',
  formData: {},
})

const { headerOperateColumn, btnConfig, visibleForm, handleVisibleForm } =
  useListOperate<Rows>()
;(headerOperateColumn.props as PTHeadersProps<Rows>[])[0].data!.splice(0, 1)

const headers = reactive([
  {
    label: '器械名称',
    props: {
      prop: 'title',
      formItem: {
        rule: true,
      },
    },
  },
  {
    label: '排序',
    props: {
      prop: 'sort',
      formItem: {
        rule: true,
        showType: ['add', 'edit'],
      },
    },
  },
  headerOperateColumn,
] satisfies PowerfulFormPTHeaders<Rows>[])

// 表格右侧操作按钮
const handleBtnClick: Handlers['btn-click'] = async ({ row, params }) => {
  if (params.emit === 'delete') {
    const { data } = await apparatusApi.apparatusDelete([row._id])
    setTimeout(() => PTable.value?.resetList(), 300)
    return
  }

  if (params.emit === 'update') {
    drawerData.visible = true
    drawerData.showType = 'edit'
    drawerData.formData = { ...row }
    return
  }
}

// 表格顶部操作按钮
const handleBtnPlusChange: Handlers['btn-plus-change'] = payload => {
  if (payload.effect === 'add') {
    drawerData.visible = true
    drawerData.showType = 'add'
  }
}

// 侧边栏表单提交按钮
const handleSubmit = async () => {
  if (drawerData.showType === 'add') {
    await DrawerPForm.value?.submitForm({}, {})
    setTimeout(() => PTable.value?.resetList(), 300)
    drawerData.visible = false
  }
  if (drawerData.showType === 'edit') {
    await DrawerPForm.value?.submitForm({}, {})
    setTimeout(() => PTable.value?.resetList(), 300)
    drawerData.visible = false
  }
}
</script>

<style scoped></style>
